<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<title>表单提交-直接跳转 到3.html</title>
</head>
<style>
	body{
		text-align: center;
	}
	div{
		width: 400px;
		height: 400px;
		margin: 100px auto;
	}
</style>
<body>
	<div>
		<h2>登录测试</h2>
		<form id='myForm' action='5.28-3_file.html'>
			<p>~欢迎您，尊敬的大帅比~</p>
			<span>账号：</span><input name='name' id='name' /></br></br>
			<span>密码：</span><input name='password' id='password' type='password'/></br></br>
			<!-- <button>登录</button> -->
			<!-- <input type='button' value="登录" /> -->
			<input type='submit' value="登录" />
		</form>
	</div>
	
	<script>
		var data=[{id:"101",name:"张三",password:"123",sex:"男"},
		{id:"102",name:"李四",password:"456",sex:"男"},
		{id:"103",name:"王五",password:"789",sex:"男"}]
		
		//入口函数 显示账号密码
		$(function(){
			$('button').click(function(){
				let name=$('#name').val();
				let password=$('#password').val();
				// alert('账号：'+name+'\n密码：'+password);
				let user=data.filter(o=>o.name==name&&o.password==password)
				// console.log(user);
				//只能输入张三 123  或者李四 456 data上有的 其他是 错误
				user.length ? alert('用户id为：'+user[0].id):alert('您的账号密码有误，请重新输入！');
				
			})
			
		})
		
		
	</script>
</body>
</html>
